<template>
  <div class="v-comp-conifg-wrap">
    <div
      v-if="componentConfigurationModel.currentStep === 'groupConfig'"
      class="v-comp-select-container"
    >
      <ModelTreeSelect
        :diagramCustomizationManagementModel="diagramCustomizationManagementModel"
        :treeSelectModel="treeSelectModel"
        @nodeDbClick="addSelectedNodeToRight"
      ></ModelTreeSelect>
      <div class="operate-area">
        <el-button
          :disabled="treeSelectModel.disableSelected || componentConfigurationModel.siderbarConfig.length === 0"
          :icon="Plus"
          @click="addSelectedNodeToRight()"
        ></el-button>
      </div>
      <ConfigurationCompsGroup
        :componentConfigurationModel="componentConfigurationModel"
        :treeSelectModel="treeSelectModel"
      ></ConfigurationCompsGroup>
    </div>
    <div
      v-if="componentConfigurationModel.currentStep === 'operationConfig'"
      class="v-comp-operation-config"
    >
      <CompsOperationConfiguration :componentConfigurationModel="componentConfigurationModel"></CompsOperationConfiguration>
    </div>
    <div class="btn-footer">
      <el-button
        :disabled="stepDisabled"
        size="default"
        @click="handleStep"
      >
        {{ componentConfigurationModel.currentStep === "groupConfig" ? "下一步" : "上一步" }}
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ModelTreeSelect from "./common/ModelTreeSelect.vue";
import ConfigurationCompsGroup from "./componentsConfigurationComps/ConfigurationCopmsGroup.vue";
import CompsOperationConfiguration from "./componentsConfigurationComps/CompsOperationConfiguration.vue";
import { computed, reactive } from "vue";
import { DiagramCustomizationManagementModel } from "../DiagramCustomizationManagementModel";
import { ComponentConfigurationModel } from "./componentsConfigurationComps/ComponentConfigurationModel";
import { TreeSelectModel } from "./common/TreeSelectModel";
import { Plus } from "@element-plus/icons";

const props = defineProps<{
  diagramCustomizationManagementModel: DiagramCustomizationManagementModel;
}>();
const componentConfigurationModel: ComponentConfigurationModel = reactive(
  props.diagramCustomizationManagementModel.componentConfigurationModel
);
const treeSelectModel = reactive(new TreeSelectModel(props.diagramCustomizationManagementModel, "compsconfiguration"));
treeSelectModel.initData();

const stepDisabled = computed(() => {
  if (componentConfigurationModel.siderbarConfig.length === 0) return true;
  if (componentConfigurationModel.siderbarConfig.every(item => item.children.length === 0)) return true;
  return false;
});

const addSelectedNodeToRight = () => {
  if (componentConfigurationModel.siderbarConfig.length === 0) {
    app.$notify({
      title: "提示",
      type: "error",
      message: "请先添加分组"
    });
    return;
  }
  if (componentConfigurationModel.selectGroupIndex < 0) {
    app.$notify({
      title: "提示",
      type: "error",
      message: "请选择一个分组"
    });
    return;
  }

  if (treeSelectModel.curTab === "tree" && !treeSelectModel.disableSelected && treeSelectModel.selectedNode) {
    const selectedNode = {
      ...treeSelectModel.selectedNode,
      ...treeSelectModel.selectedNode.data
    };
    componentConfigurationModel.siderbarConfig[componentConfigurationModel.selectGroupIndex].children.push(selectedNode);
    // treeSelectModel.selectedNode.disabled = true;
  } else if (treeSelectModel.curTab === "common" && !treeSelectModel.disableSelected && treeSelectModel.selectedCommonNode) {
    componentConfigurationModel.siderbarConfig[componentConfigurationModel.selectGroupIndex].children.push(
      treeSelectModel.selectedCommonNode
    );
    //  treeSelectModel.selectedCommonNode.disabled = true;
  }
};
const handleStep = () => {
  componentConfigurationModel.handleStep();
};
</script>
<style lang="scss">
.v-comp-conifg-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;

  .v-comp-select-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    .operate-area {
      width: 130px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      border-right: 1px solid #e4e4e4;
      button {
        margin: 0;
        width: 64px;
        height: 28px;
        border-radius: 0;
        margin-bottom: 16px;
      }
    }
  }

  .btn-footer {
    height: 48px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .v-comp-operation-config {
    flex: 1;
    display: flex;
    overflow: hidden;
  }
}
</style>
